<script setup>
//查询条件构造器
import {onMounted, ref} from "vue";

const props = defineProps({
  ignoreColumn: {
    type: Array,
    required: true
  },
  pageColumn: {
    type: Array,
    required: true
  },
  selectRefMap: {
    type: Map,
    required: true
  },
  searchHandler: {
    type: Function,
    required: true
  }
})
const querySearchBuilder = ref([])
defineExpose({
  querySearchBuilder
})
const queryColumn = ref([])
/*正确条件构造器结构
[{operator,field,method,value},...]
operator:AND/OR查询
type:查询类型
valueType:查询值类型 text,number,date
column:查询字段
value:查询值
【特别】当valueType为array时，value为数组，value1为null
 */
// 可用字段配置
// const cmpOperator = [
//   {label: '等于', value: '='},
//   {label: '不等于', value: '!='},
//   {label: '大于', value: '>'},
//   {label: '小于', value: '<'},
//   {label: '大于等于', value: '>='},
//   {label: '小于等于', value: '<='},
//   {label: '包含', value: 'like'},
//   {label: '不包含', value: 'not like'}
// ]

const operatorSelection = {
  text: [{label: '等于', value: '='}, {label: '模糊查询', value: 'like'}, {label: '不包含关键词', value: 'not like'}],
  textarea: [{label: '等于', value: '='}, {label: '模糊查询', value: 'like'}, {
    label: '不包含关键词',
    value: 'not like'
  }],
  password: [{label: '等于', value: '='}, {label: '模糊查询', value: 'like'}, {
    label: '不包含关键词',
    value: 'not like'
  }],
  number: [{label: '等于', value: '='}, {label: '大于', value: '>'}, {label: '小于', value: '<'}, {
    label: '大于等于',
    value: '>='
  }, {label: '小于等于', value: '<='}, {label: '不等于', value: '!='}],
  'date-picker': [{label: '晚于', value: '>'}, {label: '早于', value: '<'}],
  select: [{label: '属于', value: '='}, {label: '不属于', value: '!='}],
}

const removeCondition = (index) => {
  querySearchBuilder.value.splice(index, 1)
  props.searchHandler()
}

const onFieldChange = (index) => {
  let tmp = props.pageColumn.find(item => item.prop === querySearchBuilder.value[index].field);
  querySearchBuilder.value[index].type = tmp?.type
  querySearchBuilder.value[index].fieldName = tmp?.label
  querySearchBuilder.value[index].value = ''
}
const addCondition = () => {
  querySearchBuilder.value.push({
    operator: "AND",
    field: '',
    fieldName: '',
    method: '',
    value: '',
  })
}
const reset = () => {
  querySearchBuilder.value = []
  props.searchHandler()
}
const submit = () => {
  props.searchHandler()
}

onMounted(() => {
  const tmp = props.ignoreColumn?props.pageColumn.filter(e=>!props.ignoreColumn.includes(e.prop)):props.pageColumn
  queryColumn.value = tmp.map(column => {
    // console.log(column)
    return {
      value: column.prop,
      label: column.label,
      type: column.type
    }
  })
})
</script>

<template>

  <div class="query-builder" style="margin-bottom: 20px">
    <!--            <el-card>-->
    <div class="actions">
      <el-input placeholder="搜索" @click="addCondition" type="primary" size="large" style="width: 800px;"
                v-if="querySearchBuilder.length===0"/>
      <!--                <el-button icon="Plus" circle @click="addCondition" type="primary" size="large" v-if="querySearchBuilder.length===0">-->
      <!--                  -->
      <!--                </el-button>-->
    </div>
    <div v-for="(condition, index) in querySearchBuilder" :key="index" style="margin-bottom: 10px">
      <el-button icon="Plus" circle @click="addCondition" type="primary" size="large" v-if="index===0"/>
      <el-select v-model="condition.operator" size="large" style="width: 140px;margin: 0 10px" v-if="index>0">
        <el-option label="AND" value="AND"/>
        <el-option label="OR" value="OR"/>
      </el-select>
      <el-select
          v-model="condition.field"
          placeholder="选择字段"
          size="large"
          style="width: 250px;margin: 0 10px"
          @change="onFieldChange(index)"
      >
        <el-option
            v-for="field in queryColumn"
            :key="field.value"
            :label="field.label"
            :value="field.value"
        />
      </el-select>
      <el-select
          v-if="operatorSelection[condition?.type]"
          v-model="condition.method"
          placeholder="比较方式"
          size="large"
          style="width: 120px;margin: 0 10px"
      >
        <el-option
            v-for="op in operatorSelection[condition?.type]"
            :key="op.value"
            :label="op.label"
            :value="op.value"
        />
      </el-select>
      <el-text v-else style="color:red">
        该字段无法用于查询
      </el-text>
      <template v-if="condition.type==='text'||condition.type==='textarea'||condition.type==='password'">
        <el-input
            v-model="condition.value"
            placeholder="输入值"
            size="large"
            style="width: 380px;margin: 0 10px"
        />
      </template>
      <template v-else>
        <el-date-picker
            v-if="condition.type === 'date-picker'"
            v-model="condition.value"
            type="datetime"
            placeholder="选择日期"
            size="large"
            style="width: 380px;margin: 0 10px"
        />
        <el-select
            v-else-if="condition.type === 'select'"
            v-model="condition.value"
            placeholder="请选择"
            size="large"
            style="width: 380px;margin: 0 10px"
        >
          <el-option
              v-for="item in selectRefMap?.get(condition.fieldName)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </template>

      <el-button
          @click="removeCondition(index)"
          type="danger"
          size="large"
          icon="CloseBold"
          circle
      ></el-button>
      <el-button @click="submit" type="success" size="large" v-if="index===0">
        查询
      </el-button>
      <el-button @click="reset" type="info" size="large" v-if="index===0">
        重置
      </el-button>
    </div>
  </div>
  <!--            </el-card>-->
</template>


<style scoped>

</style>